<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // let map = new Map([['name', '卡莎'], ['age', 20], ['height', '170cm']])
        // console.log(map.size)
        // map.set('say', 'hellow')
        // console.log(map)
        // map.delete('say')
        // // map.clear()
        // console.log(map)

        // let res = map.has('age')
        // console.log(res)

        // let keys = map.keys()
        // let values = map.values()
        // console.log(keys, values)

        let lis = document.querySelectorAll('ul li')
        console.log(lis)
        let map = new Map(([[lis[0], 'red'], [lis[1], 'blue'], [lis[2], 'green']]))
        // map.set(lis[0], "red");
        // map.set(lis[1], "blue");
        // map.set(lis[2], "yellow");
        // map = ([[lis[0], 'red'], [lis[1], 'blue'], [lis[2], 'green']])

        map.forEach((item, key) => {
            console.log(item, key)
            key.style.color = item
        })






    </script>
</body>

</html>